<template>
    <!-- <div>

        <div>
            <Dialog :list="list" ref="dialog">
                <div class="a">1</div>
            </Dialog>
        </div>

        <div>

            <Scrolllist v-if="aa" :list="lists"></Scrolllist>

        </div>
        <template >
            <div style="color: red;" v>
                我要被隐藏了
                <div>2</div>
            </div>
        </template>


    </div> -->

    <div class="box">
        <Echarts class="echarts"></Echarts>
        <Echarts class="echarts1"></Echarts>
    </div>

</template>

<script  setup  name="Stets">
import Echarts from '@/components/echarts'
import  Tetts from '@/components/tetts'
import html2canvas from "html2canvas";
import tets from '@/utils/auto'
import Scrolllist from '@/components/scrolllist'
import Dialog from "@/components/Dialoghtml.vue"
import { nextTick } from 'vue'
const style = ref(null);
const exportContent = ref(null)
const list = ['修复', '删除', '编辑']
const aa = ref(false)
const loading = ref(false)
const currentComponent = shallowRef(null);
const lists = ref([])
const dialog = ref(null)
const container = ref(null)
console.log('exportContent', exportContent.value);

const exportToImage = async () => {
   await  nextTick()
    if (container.value) {
        try {
            // 使用 html2canvas 渲染指定的 DOM 元素
            // const canvas = await html2canvas(exportContent.value as HTMLElement);
         
            const canvas = await html2canvas(container.value, {
                // backgroundColor: null, // 保留背景透明度
                useCORS: true, // 启用跨域资源支持
            });

            // 将画布转换为图片数据 URL
            const imageData = canvas.toDataURL("image/png");

            // 创建一个下载链接
            const link = document.createElement("a");
            
            link.href = imageData;
            link.download = "exported-image.png";

            // 触发下载
            link.click();
        } catch (error) {
            console.error("导出图片失败:", error);
        }
    }
}







const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(a.slice(1, 5));







</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

.echarts{
    width: 47%;
    height: 400px;
    background: red;
  
}
.echarts1{
    width: 47%;
        height: 400px;
        background: pink;
    
}
}
</style>